<template>
  <view class="batch-bar" :style="{ bottom: safeAreaBottom }">
    <view class="batch-left">
      <checkbox-group @change="(e) => $emit('toggle-all', !!e.detail.value.length)"  >
        <checkbox :checked="isAllSelected" color="$primary-color" />
      </checkbox-group>
      <text class="select-text">全选</text>
      <text class="total-text">合计: ¥{{ totalPrice }}</text>
    </view>

    <view class="batch-right">
      <view class="btn-delete" @click="$emit('batch-delete')">删除</view>
      <view class="btn-checkout" @click="$emit('batch-checkout')"
        >结算({{ selectedCount }})</view
      >
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";

const props = defineProps({
  selectedCount: {
    type: Number,
    default: 0,
  },
  totalPrice: {
    type: Number,
    default: 0,
  },
  isAllSelected: {
    type: Boolean,
    default: false,
  },
});


// 安全区域处理
const safeAreaBottom = ref("0px");

const emit = defineEmits(['batch-delete', 'batch-checkout', 'toggle-all'])


</script>

<style lang="scss">
@import "@/uni.scss";
.batch-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--window-bottom, 50px);
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  background-color: $white-bg;;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .batch-left {
    display: flex;
    align-items: center;

    .select-text {
      margin: 0 20rpx;
      font-size: $font-size-28rpx;
    }

    .total-text {
      font-size: $font-size-28rpx;
      font-weight: bold;
      color: $primary-color;
    }
  }

  .batch-right {
    display: flex;

    .btn-delete,
    .btn-checkout {
      height: 70rpx;
      line-height: 70rpx;
      padding: 0 40rpx;
      border-radius: 35rpx;
      font-size: $font-size-28rpx;
    }

    .btn-delete {
      margin-right: 20rpx;
      background-color: #f8f8f8;
      color: $text-color-666;
    }

    .btn-checkout {
      background-color: $primary-color;
      color: $text-color-inverse;
    }
  }
}
</style>
